<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1 ,user-scalable=0"/>
	<title>培训认证</title>
	<link href="__STATIC__/traveller/css/TrainingCertification.css" type="text/css" rel="stylesheet" />
	<link href="__STATIC__/traveller/css/bootstrap.min.css" rel="stylesheet"/>
	<script src="__STATIC__/traveller/js/jquery-3.3.1.min.js"></script>
	<link rel="stylesheet" type="text/css" href="__STATIC__/admin/layui/css/layui.css"/>
	<script type="text/javascript" src="__STATIC__/admin/layui/layui.js"></script>
	<style>
		.fbtn {
			border: none;
			padding-top: 10px;
			padding-bottom: 10px;
		}
		.fbtn a{
			color: black;
		}
	</style>
</head>
<body>
	<div id="funcButton" class="container">
		{php} static $ji = 1; {/php}
		{foreach $car_article as $vo}
			<span>
				<button class="fbtn row-xs-3 row-sm-3 row-md-3 row-lg-3">
					<a href="{:url('index/train_certify/viewText',['token'=>$token,'id'=>$vo['id']],'',true)}">{$vo.title}</a>
				</button>
			</span>
			{php}
				if($ji >= 4) {
					$ji = 1;
					echo "<br>";
				}else{
					$ji++;
				}
			{/php}
		{/foreach}
	</div>
	<!-- 认证等级 -->
	<div id="middlebox" class="container middle">

		<div class="tc-top">
			<span><img src="__STATIC__/traveller/img/tc1.png" alt="tc1.png"></span>
			<span>认证等级</span>
			<span><img src="__STATIC__/traveller/img/tc2.png" alt="tc2.png"></span>
		</div>
		{php}
		//dump($driver_rank);
			$driverRankName = '新手';
			$order_num = 0;
			$total_order_num = 0;
			$progress = 'width: 0%';
			if($driver_rank['driver_rank_id'] == 0){
				$driverRankName = $driver_rank['name'];
				$driverRankLeave = '__STATIC__/traveller/grade/leave_line.png';
				$order_num = empty($driver_rank['order_num'])? 0 : $driver_rank['order_num'];
				$total_order_num = empty($driver_rank['total_order_num'])? 0 : $driver_rank['total_order_num'];
				if(empty($total_order_num)){
					$progress = 'width: 0%';
				}else{
					$percent = round($order_num/$total_order_num * 100, 2).'%';
				}
				$progress = 'width: '.$percent;
			}elseif($driver_rank['driver_rank_id'] == 13){	// 初级
				$driverRankName = $driver_rank['name'];
		    	$driverRankLeave = '__STATIC__/traveller/grade/leave_line2.png';
				$order_num = empty($driver_rank['order_num'])? 0 : $driver_rank['order_num'];
				$total_order_num = empty($driver_rank['total_order_num'])? 0 : $driver_rank['total_order_num'];
				if(empty($total_order_num)){
					$progress = 'width: 0%';
				}else{
					$percent = round($order_num/$total_order_num * 100, 2).'%';
				}
				$progress = 'width: '.$percent;
			}elseif($driver_rank['driver_rank_id'] == 14){
				$driverRankName = $driver_rank['name'];
				$driverRankLeave = '__STATIC__/traveller/grade/leave_line3.png';
				$order_num = empty($driver_rank['order_num'])? 0 : $driver_rank['order_num'];
				$total_order_num = empty($driver_rank['total_order_num'])? 0 : $driver_rank['total_order_num'];
				if(empty($total_order_num)){
					$progress = 'width: 0%';
				}else{
					$percent = round($order_num/$total_order_num * 100, 2).'%';
				}
				$progress = 'width: '.$percent;
			}elseif($driver_rank['driver_rank_id'] == 15){
				$driverRankName = $driver_rank['name'];
				$driverRankLeave = '__STATIC__/traveller/grade/leave_line4.png';
				$order_num = empty($driver_rank['order_num'])? 0 : $driver_rank['order_num'];
				$total_order_num = empty($driver_rank['total_order_num'])? 0 : $driver_rank['total_order_num'];
				if(empty($total_order_num)){
					$progress = 'width: 0%';
				}else{
					$percent = round($order_num/$total_order_num * 100, 2).'%';
				}
				$progress = 'width: '.$percent;
			}
		{/php}
		<div class="container">
				<div class="line"><img id="leave_line" src="{$driverRankLeave}" alt="leave_line.png"/></div>
				<div class="btn-leave">
					{if ($driverRankName == '新手')}
						<button style="left:-36.5%"  disabled="disabled">{$driverRankName}</button>
					{elseif ($driverRankName == '初级')}
						<button  style="left: -12.5%" disabled="disabled">{$driverRankName}</button>
					{elseif ($driverRankName == '中级')}
						<button  style="left:12.5%" disabled="disabled">{$driverRankName}</button>
					{elseif ($driverRankName == '高级')}
						<button  style="left:35.5%" disabled="disabled">{$driverRankName}</button>
					{/if}
				</div>
		</div>
		<div class="c2">
			<div id="tc-bottom" class="tc-bottom container ">
				<div style="float: left;">完成订单量</div>
				<div class="progress" style="border-radius: 20px; height: 10px; margin:0 2.5% ;">
					<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100" style="{$progress}">
					</div>
				</div>
				<div id="" style="float: left;">{$order_num}/{$total_order_num}</div>
			</div>
		</div>
	</div>
	<!-- 视频信息 -->
	{if !empty($train_data)}

		<div class="v-title" style="padding-left: 15px;">我的课程</div>
			{foreach $train_data as $vo2}
				<div id="vbox" class="container">
				<div id="videobox">
					<div id="v-box" class="v-box">
						<div>
							<a href="{:url('index/train_certify/courseDetail',['token'=>$token,'training_materials_id'=>$vo2['id'],'user_id'=>$user_id],'',true)}">
	<!--							<img id="im" src="{$vo2.video_img_id}" class="img-re" alt="课程图片"/>-->
								<img id="im" src="{$vo2.video_img_id}" style="height: 250px;" class="img-re" alt="课程图片"/>
							</a>
						</div>
						<div class="video-title">{$vo2.title}</div>
						{php}
							if($vo2['is_read']){
								$tcSrc = '__STATIC__/traveller/img/tc_vs1.png';
								$tcText = '已完成';
							}else{
								$tcSrc = '__STATIC__/traveller/img/tc_q2.png';
								$tcText = '未完成';
							}
						{/php}
						<div style="height: 30px;">

							{if $tcText == '已完成'}
								<div class="v-icon" >
									<img src="{$tcSrc}" alt="tc_vs1.png"/>
								</div>
								<div id="vs" class="v-status">{$tcText}</div>
							{else /}
								<div id="vs1" class="v-status" style="color: #C0C0C0;">{$tcText}</div>
							{/if}
						</div>
					</div>
				</div>
			</div>
			{/foreach}
		{php}
			if(empty($driver_rank['driver_rank_id'])){
				$driver_rank_id = 13;
			}elseif($driver_rank['driver_rank_id'] == 13){
				$driver_rank_id = 14;
			}elseif($driver_rank['driver_rank_id'] == 13){
				$driver_rank_id = 15;
			}
		{/php}
		{php}
		if($driver_rank['driver_rank_id'] == 0){
			$driver_rank_id = 13;
		}elseif($driver_rank['driver_rank_id'] == 13){
			$driver_rank_id = 14;
		}elseif($driver_rank['driver_rank_id'] == 14){
			$driver_rank_id = 15;
		}
			// $url = "http://huaer.zanboon.com/exam/exam.html?token=".$token."&user_id=".$user_id."&rank_id=".$driver_rank_id;
			 $url = "http://erp.huaertrip.com/exam/exam.html?token=".$token."&user_id=".$user_id."&rank_id=".$driver_rank_id;
		{/php}
		<div class="container">
				{if ($is_read == $curriculum)}
					<a class="btn-test" type="button" href="{$url}">认证考试</a>
				{else /}
					<a class="btn-test" type="button" disabled="true" href="javascript:;" onclick="kaoshi()">认证考试</a>
				{/if}
			</div>
	{/if}
	<!--	  <script src="__STATIC__/traveller/js/TrainingCertification.js"></script>-->
	<script src="__STATIC__/traveller/js/bootstrap.min.js"></script>
	<script>
		function kaoshi() {
			// console.log('进入了');
			layui.use('layer', function () {
				var layer = layui.layer;
				layer.msg('请学习完相关视频教程,才进行认证考试');
			});
		}
	</script>
</body>
</html>
